<template>
  <view class="container" :style="appThemeStyle">
    <view class="pickup-wrap" v-if="pickups.length">
      <view class="pickup-item" v-for="(item, index) in pickups" :key="index" @click="onSelectPickup(item)">
        <view class="pickup-item__info">
          <view class="user-avatar">
            <avatar-image :url="shopLogo(item.logo)" :width="128" borderRadius="10%"/>
          </view>
          <view class="pickup-item__info__content">
            <view class="pick-name oneline-hide">{{ item.pickUpName }}</view>
            <view class="desc">营业时间：{{ item.beginTime + '-' + item.endTime }}</view>
            <view class="desc">自提地址：{{ item.address }}</view>
          </view>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <Empty tips="这里空空如也～" v-else />
    <!-- 底部操作按钮 -->
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <u-button type="primary" shape="circle" @click="onSelectPickup(null)">不启用自提点</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import AvatarImage from "@/components/avatar-image/index.vue"
import Empty from '@/components/empty'

export default {
  components: { AvatarImage, Empty },
  data() {
    return {}
  },
  computed: {
    pickups() {
      return store.getters.pickups
    },
    shopLogo() {
      return (val) => {
        if (val) {
          return val
        }
        return this.$image('/storeminiapp/icon_tenant.png')
      }
    }
  },
  onLoad() {
  },
  methods: {
    onSelectPickup(item) {
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.$emit('selectPickupId', item ? item.pickupId : -1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 24rpx;
  // 设置ios刘海屏底部横线安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);

  .pickup-wrap {

    .pickup-item {
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      &__info {
        display: flex;
        align-items: center;

        &__content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16rpx;
          color: #333;

          .pick-name {
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
            max-width: 450rpx;
          }

          .desc {
            font-size: 24rpx;
            color: #666;
            line-height: 40rpx;
          }
        }
      }

      .icon-arrow-right {
        font-size: 40rpx;
        color: #ccc;
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
      padding: 16rpx 32rpx;
    }
  }
}

</style>
